<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="数据日期" prop="sjrq">
        <el-date-picker v-model="queryParams.sjrq" size="small" style="width: 240px" value-format="yyyy-MM-dd" type="date"
          range-separator="-" placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" v-hasPermi="['buss:jxxtlsb:export']">导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="dkjgzrrList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="数据日期" align="center" prop="sjrq" />
      <el-table-column label="单户20万以下" align="center" prop="section1" />
      <el-table-column label="单户20万以下人数" align="center" prop="section1Num" />
      <el-table-column label="单户20w-50w" align="center" prop="section2" />
      <el-table-column label="单户20w-50w人数" align="center" prop="section2Num" />
      <el-table-column label="单户50w-100w" align="center" prop="section3" />
      <el-table-column label="单户50w-100w 人数" align="center" prop="section3Num" />
      <el-table-column label="单户100w-300w" align="center" prop="section4" />
      <el-table-column label="单户100w-300w人数" align="center" prop="section4Num" />
      <el-table-column label="单户300w-500w" align="center" prop="section5" />
      <el-table-column label="单户300w-500w人数" align="center" prop="section5Num" />
      <el-table-column label="单户500w-1000w" align="center" prop="section6" />
      <el-table-column label="单户500w-1000w人数" align="center" prop="section6Num" />
      <el-table-column label="单户1000w以上" align="center" prop="section7" />
      <el-table-column label="单户1000w以上人数" align="center" prop="section7Num" />
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getList" />


    <!-- 添加或修改贷款结构趋势-自然人单户或公类类单户4.3.1.1.1-5|6对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="1自然人单户金额结构 2公司类单户金额结构" prop="type">
          <el-select v-model="form.type" placeholder="请选择1自然人单户金额结构 2公司类单户金额结构">
            <el-option v-for="dict in typeOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <div>
      <div id="yxyjck" style="width:100%;height: 375px;margin-top: 50px;"></div>
    </div>
  </div>

</template>

<script>
  import {
    listDkjgzrr,
    getDkjgzrr,
    delDkjgzrr,
    addDkjgzrr,
    updateDkjgzrr
  } from "@/api/buss/bi/dkjgzrrdh";

  export default {
    name: "Dkjgzrr",
    components: {},
    data() {
      return {
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 贷款结构趋势-自然人单户或公类类单户4.3.1.1.1-5|6表格数据
        dkjgzrrList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 数据日期字典
        sjrqOptions: [],
        // TYPE 1.单户20万以下         2.300万一下字典
        section1Options: [],
        // TYPE 1.单户20万以下人数         2.300万一下人数字典
        section1NumOptions: [],
        // TYPE 1.单户20w-50w         2.300万-1000万字典
        section2Options: [],
        // TYPE 1.单户20w-50w人数         2.300万-1000万人数字典
        section2NumOptions: [],
        // TYPE 1.单户50w-100w       2.1000万-3000万字典
        section3Options: [],
        // TYPE 1.单户50w-100w 人数      2.1000万-3000万人数字典
        section3NumOptions: [],
        // TYPE 1.单户100w-300w     2.3000万以上字典
        section4Options: [],
        // TYPE 1.单户100w-300w人数     2.3000万以上人数字典
        section4NumOptions: [],
        // TYPE 1.单户300w-500w字典
        section5Options: [],
        // TYPE 1.单户300w-500w人数字典
        section5NumOptions: [],
        // TYPE 1.单户500w-1000w字典
        section6Options: [],
        // TYPE 1.单户500w-1000w人数字典
        section6NumOptions: [],
        // TYPE 1.单户1000w以上字典
        section7Options: [],
        // TYPE 1.单户1000w以上人数字典
        section7NumOptions: [],
        // 1自然人单户金额结构 2公司类单户金额结构字典
        typeOptions: [],
        // 1自然人单户金额结构 2公司类单户金额结构字典
        createTimeOptions: [],
        //数据日期
        	qushiDate: [],
          //实体贷款
        	qushisection1Num: [],
          //转贴现
        	qushisection2Num: [],
          //贸易融资
        	qushisection3Num: [],
          //零售类贷款
          qushisection4Num: [],
          //公司类贷款
          qushisection5Num: [],
          //直贴贷款
          qushisection6Num: [],

          qushisection7Num: [],
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          sjrq: null,
          section1: null,
          section1Num: null,
          section2: null,
          section2Num: null,
          section3: null,
          section3Num: null,
          section4: null,
          section4Num: null,
          section5: null,
          section5Num: null,
          section6: null,
          section6Num: null,
          section7: null,
          section7Num: null,
          type: null,
          createTime: null
        },
        // 表单参数
        form: {},
        // 表单校验
        rules: {}
      };
    },
    created() {
      this.getList();
      this.getQstList(); //趋势图
    },
    methods: {
      /** 查询贷款结构趋势-自然人单户或公类类单户4.3.1.1.1-5|6列表 */
      getList() {
        this.loading = true;
        this.queryParams.type = "1";
        listDkjgzrr(this.queryParams).then(response => {
          this.dkjgzrrList = response.data.zrrdh.rows;
          this.total = response.data.zrrdh.total;
          this.loading = false;
        });
      },
      /** 查询趋势图列表 */
      getQstList() {
         this.queryParams.type = 1;
        listDkjgzrr(this.queryParams).then(response => {
          for (var i = 0; i < response.data.zrrdhhz.length; i++) {
               this.qushiDate.push(response.data.zrrdhhz[i].sjrq);
               this.qushisection1Num.push(response.data.zrrdhhz[i].section1Num);
               this.qushisection2Num.push(response.data.zrrdhhz[i].section2Num);
          	   this.qushisection3Num.push(response.data.zrrdhhz[i].section3Num);
               this.qushisection4Num.push(response.data.zrrdhhz[i].section4Num);
               this.qushisection5Num.push(response.data.zrrdhhz[i].section5Num);
               this.qushisection6Num.push(response.data.zrrdhhz[i].section6Num);
               this.qushisection7Num.push(response.data.zrrdhhz[i].section7Num);
          }
          this.yxyjzst();  //趋势图
        });
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      // 表单重置
      reset() {
        this.form = {
          sjrq: null,
          section1: null,
          section1Num: null,
          section2: null,
          section2Num: null,
          section3: null,
          section3Num: null,
          section4: null,
          section4Num: null,
          section5: null,
          section5Num: null,
          section6: null,
          section6Num: null,
          section7: null,
          section7Num: null,
          type: null,
          createTime: null
        };
        this.resetForm("form");
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.sjrq)
        this.single = selection.length !== 1
        this.multiple = !selection.length
      },
      /** 新增按钮操作 */
      handleAdd() {
        this.reset();
        this.open = true;
        this.title = "添加贷款结构趋势-自然人单户或公类类单户4.3.1.1.1-5|6";
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        this.reset();
        const sjrq = row.sjrq || this.ids
        getDkjgzrr(sjrq).then(response => {
          this.form = response.data;
          this.open = true;
          this.title = "修改贷款结构趋势-自然人单户或公类类单户4.3.1.1.1-5|6";
        });
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            if (this.form.sjrq != null) {
              updateDkjgzrr(this.form).then(response => {
                this.msgSuccess("修改成功");
                this.open = false;
                this.getList();
              });
            } else {
              addDkjgzrr(this.form).then(response => {
                this.msgSuccess("新增成功");
                this.open = false;
                this.getList();
              });
            }
          }
        });
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        const sjrqs = row.sjrq || this.ids;
        this.$confirm('是否确认删除贷款结构趋势-自然人单户或公类类单户4.3.1.1.1-5|6编号为"' + sjrqs + '"的数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          return delDkjgzrr(sjrqs);
        }).then(() => {
          this.getList();
          this.msgSuccess("删除成功");
        }).catch(() => {});
      },
      /** 导出按钮操作 */
      handleExport() {
        this.queryParams.type = 1
        this.download('buss/reportLsb/zrrdhExport', {
          ...this.queryParams
        }, `自然人单户.xlsx`)
      },
      yxyjzst(){
        let yxyjckChart = this.$echarts.init(document.getElementById('yxyjck'))
        yxyjckChart.setOption({
              tooltip: {
              	trigger: 'axis'
              },
              legend: {
              	textStyle: {
              		fontSize: 18
              	},
              	data: ['单户20万元以下','20-50万元','50-100万元','100-300万元','300-500万元','500-1000万元','1000万元以上']
              },
              grid: {
              	left: '8%',
              	right: '4%',
              	bottom: '6%',
              	ntainLabel: true
              },
              xAxis: {
              	type: 'category',
              	boundaryGap: false,
              	data:  this.qushiDate
              },
              yAxis: {
              	type: 'value'
              },
              series: [

              	{
              		name: '单户20万元以下',
              		type: 'line',
              		//stack: '总量',
              		data: this.qushisection1Num
              	},
              	{
              		name: '20-50万元',
              		type: 'line',
              		//stack: '总量',
              		data: this.qushisection2Num
              	},
              	{
              		name: '50-100万元',
              		type: 'line',
              		//stack: '总量',
              		data: this.qushisection3Num
              	},
              	{
              		name: '100-300万元',
              		type: 'line',
              		//stack: '总量',
              		data: this.qushisection4Num
              	},
              	{
              		name: '300-500万元',
              		type: 'line',
              		//stack: '总量',
              		data: this.qushisection5Num
              	},
              	{
              		name: '500-1000万元',
              		type: 'line',
              		//stack: '总量',
              		data: this.qushisection6Num
              	},
              	{
              		name: '1000万元以上',
              		type: 'line',
              		//stack: '总量',
              		data: this.qushisection7Num
              	}

              ]
          });
      }
    }
  };
</script>
